<template>
    <el-card>
        <div slot="header" class="clearfix">
            <span>权限设置</span>
        </div>
        <el-steps :active="active" finish-status="success" align-center>
            <el-step title="路由权限"></el-step>
            <el-step title="菜单、操作权限"></el-step>
        </el-steps>
        <div class="box">
            <!-- 路由设置 -->
            <el-tree v-show="active === 0" ref="tree_data" :data="tree_data[0].children" show-checkbox
                node-key="permission_id" default-expand-all :props="defaultProps_route" :check-strictly="false">
            </el-tree>
            <!-- 菜单设置 -->
            <el-tree v-show="active === 1" ref="tree_menu" :data="tree_menu[0].children" show-checkbox
                node-key="permission_id" default-expand-all :props="defaultProps_menu" :render-content="renderContent">
            </el-tree>
        </div>
        <div class="button">
            <el-button v-show="active === 0" type="primary" style="margin-top: 12px;" @click="next">下一步</el-button>
            <router-link v-show="active === 0" to="/system/role" class="link">
                <el-button style="margin-top: 12px;">取消</el-button>
            </router-link>
            <el-button v-show="active === 1" type="primary" style="margin-top: 12px;" @click="active--">上一步</el-button>
            <el-button v-show="active === 1" @click="handlePreserve" type="success"
                style="margin-top: 12px;">保存设置</el-button>
        </div>

    </el-card>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
    data() {
        return {
            active: 0,
            defaultProps_route: {
                children: 'children',
                label: 'permission_remark'
            },
            defaultProps_menu: {
                children: 'children',
                label: function (data, node) {
                    if (data.resource_type_code === 'MENU') {
                        return data.menu_name;
                    } else if (data.resource_type_code === 'OPERATION') {
                        return data.operation_name;
                    }
                },
                disabled: '',
            },
            permission_route: [],
            permission_menu: [],
        };
    },
    async created() {
        // 获取参数
        let { role_id } = this.$route.params;
        let { status, data } = await this.load_route_limit({ role_id });
        if (status) {
            this.route_limit.forEach(element => {
                this.permission_route.push(element.permission_id);
            });
            let nodes = [];
            this.permission_route.forEach((item) => {
                const node = this.$refs.tree_data.getNode(item);
                if (node.isLeaf) {
                    nodes.push(item);
                }
            })
            this.$refs.tree_data.setCheckedKeys(nodes, true);
        }


    },
    watch: {
        route_limit(newValue) {
            newValue.forEach(element => {
                this.permission_route.push(element.permission_id);
            });
        },
        menu_limit(newValue) {
            newValue.forEach(element => {
                this.permission_menu.push(element.permission_id);
            });
        }
    },
    computed: {
        ...mapGetters('route', ['tree_data']),
        ...mapGetters('menu', ['tree_menu']),
        ...mapState('limit', ['route_limit', 'menu_limit']),
    },
    methods: {
        ...mapActions('limit', ['load_route_limit', 'load_menu_limit']),
        async next() {
            this.active++;
            this.permission_route = this.$refs.tree_data.getCheckedKeys();
            let half = this.$refs.tree_data.getHalfCheckedKeys();
            this.permission_route = [...this.permission_route, ...half];
            let arr = [];
            this.defaultProps_menu.disabled = (data, node) => {
                if (this.permission_route.includes(data.route_id)) {
                    arr.push(data.permission_id)
                    return false;
                } else if (arr.includes(data.parent_id)) {
                    return false;
                }
                return true;
            }
            // 加载菜单权限
            // 获取参数
            let { role_id } = this.$route.params;
            let { status, data } = await this.load_menu_limit({ role_id });
            if (status) {
                this.menu_limit.forEach(element => {
                    this.permission_menu.push(element.permission_id);
                });
                let nodes = [];
                this.permission_menu.forEach((item) => {
                    const node = this.$refs.tree_menu.getNode(item);
                    if (node.isLeaf) {
                        nodes.push(item);
                    }
                })
                this.$refs.tree_menu.setCheckedKeys(nodes, true);
            }

        },
        renderContent(h, { node, data, store }) {
            if (data.resource_type_code === 'MENU') {
                return (
                    <span class="custom-tree-node">
                        <i class="el-icon-notebook-2" style='color:#67c23a'></i>
                        <span class='text'>{node.label}</span>
                    </span>);
            } else if (data.resource_type_code === 'OPERATION') {
                return (
                    <span class="custom-tree-node">
                        <i class="el-icon-s-operation" style='color:#e6a23c'></i>
                        <span class='text'>{node.label}</span>
                    </span>);
            }
        },
        ...mapActions('limit', ['edit_route_limit', 'edit_menu_limit']),
        async handlePreserve() {
            this.permission_route = this.$refs.tree_data.getCheckedKeys();
            // 注意要获取半选状态的父节点
            let half_route = this.$refs.tree_data.getHalfCheckedKeys();
            this.permission_route = [...this.permission_route, ...half_route];
            this.permission_menu = this.$refs.tree_menu.getCheckedKeys();
            // 注意要获取半选状态的父节点
            let half_menu = this.$refs.tree_menu.getHalfCheckedKeys();
            this.permission_menu = [...this.permission_menu, ...half_menu];
            let { role_id } = this.$route.params;
            let { status: route_staus, msg: route_msg } = await this.edit_route_limit({ role_id, permissions: this.permission_route })
            let { status: menu_staus, msg: menu_msg } = await this.edit_menu_limit({ role_id, permissions: this.permission_menu })
            if (route_staus && menu_staus) {
                this.$router.push('/system/role')
                this.$message.success(menu_msg);
            } else {
                this.$message.error(menu_msg)
            }
        }

    }
}
</script>

<style lang="less" scoped>
.link {
    margin-left: 10px;
}

.box {
    border: 1px solid #409eff;
    padding: 20px;
    margin: 20px 0;
}

.text {
    font-size: 14px;
    padding-right: 5px;
}
</style>